<template>
	<div class="login-container">
		<div class="login-background">
			<div class="login-shape shape-1"></div>
			<div class="login-shape shape-2"></div>
			<div class="login-shape shape-3"></div>
		</div>

		<div class="login-card">
			<div class="login-header">
				<div class="logo">
					<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M20 5L33.6603 28.75H6.33975L20 5Z" fill="#3B82F6" />
						<circle cx="20" cy="20" r="7" fill="#EF4444" />
					</svg>
				</div>
				<h1>任务管理系统</h1>
				<h2>管理员登录</h2>
			</div>

			<div class="login-form">
				<div class="form-group">
					<label for="username">用户名</label>
					<div class="input-with-icon">
						<i class="user-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round">
								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
								<circle cx="12" cy="7" r="4"></circle>
							</svg>
						</i>
						<input type="text" id="username" v-model="username" placeholder="请输入用户名" @focus="handleFocus"
							@blur="handleBlur">
					</div>
				</div>

				<div class="form-group">
					<label for="password">密码</label>
					<div class="input-with-icon">
						<i class="password-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round">
								<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
								<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
							</svg>
						</i>
						<input :type="showPassword ? 'text' : 'password'" id="password" v-model="password"
							placeholder="请输入密码" @focus="handleFocus" @blur="handleBlur">
						<button type="button" class="toggle-password" @click="showPassword = !showPassword">
							<svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
								viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
								stroke-linecap="round" stroke-linejoin="round">
								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
								<circle cx="12" cy="12" r="3"></circle>
							</svg>
							<svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round">
								<path
									d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
								</path>
								<line x1="1" y1="1" x2="23" y2="23"></line>
							</svg>
						</button>
					</div>
				</div>

				<div class="form-options">
					<div class="remember-me">
						<input type="checkbox" id="remember" v-model="rememberMe">
						<label for="remember">记住我</label>
					</div>
					<a href="#" class="forgot-password">忘记密码?</a>
				</div>

				<button type="submit" class="login-button" @click="login" :disabled="!isFormValid">
					<span v-if="!loading">登录</span>
					<span v-else class="loading-spinner"></span>
				</button>
			</div>

			<div class="login-footer">
				<p>没有账号? <a href="#">联系管理员</a></p>
			</div>
		</div>

		<!-- 错误提示弹窗 -->
		<div class="error-popup" v-if="loginError" @click="loginError = ''">
			<div class="error-content" @click.stop>
				<div class="error-header">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<circle cx="12" cy="12" r="10"></circle>
						<line x1="12" y1="8" x2="12" y2="12"></line>
						<line x1="12" y1="16" x2="12.01" y2="16"></line>
					</svg>
					<h3>登录失败</h3>
				</div>
				<p>{{ loginError }}</p>
				<button @click="loginError = ''">确定</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import {
		isAuthenticated
	} from '../router';
	import api from '../api/api';

	const router = useRouter();
	const username = ref('');
	const password = ref('');
	const rememberMe = ref(false);
	const showPassword = ref(false);
	const loading = ref(false);
	const loginError = ref('');

	const isFormValid = computed(() => {
		return username.value.trim() !== '' && password.value.trim() !== '';
	});

	const login = async () => {
		if (!isFormValid.value) return

		// 清除之前的错误消息
		// 表单验证
		if (!username.value || !password.value) {
			loginError.value = '请输入用户名和密码'
			return
		}

		loading.value = true
		try {
			const response = await api.login(username.value, password.value)

			if (response.data.token) {
				// 存储token
				localStorage.setItem('token', response.data.token)

				// 如果选择了"记住我"，存储用户名
				if (rememberMe.value) {
					localStorage.setItem('username', username.value)
				}

				// 设置认证状态
				isAuthenticated.value = true

				// 导航到主页
				router.push('/')
			}
		} catch (error) {
			console.error('登录失败:', error)
			// 根据错误类型显示不同的错误消息
			if (error.response) {
				switch (error.response.status) {
					case 401:
						loginError.value = '用户名或密码错误'
						break
					case 404:
						loginError.value = '用户不存在'
						break
					default:
						loginError.value = '登录失败，请稍后重试'
				}
			} else {
				loginError.value = '用户名或密码错误,请重新尝试'
			}
		} finally {
			loading.value = false
		}
	};

	const handleFocus = (e) => {
		e.target.parentNode.classList.add('focused');
	};

	const handleBlur = (e) => {
		if (e.target.value === '') {
			e.target.parentNode.classList.remove('focused');
		}
	};
</script>

<style lang="scss" scoped>
	// 颜色变量
	$primary: #3B82F6;
	$primary-dark: #2563EB;
	$secondary: #EF4444;
	$text: #1F2937;
	$text-light: #6B7280;
	$gray-light: #F3F4F6;
	$white: #FFFFFF;

	// 登录页面容器
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
		padding: 20px;
		position: relative;
		overflow: hidden;
	}

	// 背景动态形状
	.login-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;

		.login-shape {
			position: absolute;
			border-radius: 50%;
			opacity: 0.4;

			&.shape-1 {
				width: 500px;
				height: 500px;
				background: linear-gradient(to right, $primary, $secondary);
				top: -200px;
				right: -100px;
				animation: float 15s ease-in-out infinite;
			}

			&.shape-2 {
				width: 300px;
				height: 300px;
				background: linear-gradient(to right, $secondary, #FBBF24);
				bottom: -100px;
				left: -150px;
				animation: float 18s ease-in-out infinite reverse;
			}

			&.shape-3 {
				width: 200px;
				height: 200px;
				background: linear-gradient(to right, #10B981, $primary);
				bottom: 20%;
				right: 10%;
				animation: float 12s ease-in-out infinite;
			}
		}
	}

	@keyframes float {
		0% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(20px, 20px);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	// 登录卡片
	.login-card {
		width: 100%;
		max-width: 450px;
		background: $white;
		border-radius: 16px;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.02);
		padding: 40px;
		position: relative;
		z-index: 10;
		box-sizing: border-box;
		/* 添加这一行确保内边距不会导致内容溢出 */

		@media (max-width: 500px) {
			padding: 30px 20px;
		}
	}

	// 登录标题
	.login-header {
		text-align: center;
		margin-bottom: 30px;

		.logo {
			display: flex;
			justify-content: center;
			margin-bottom: 16px;
		}

		h1 {
			font-size: 24px;
			font-weight: 700;
			color: $text;
			margin: 0 0 8px 0;
		}

		h2 {
			font-size: 16px;
			font-weight: 500;
			color: $text-light;
			margin: 0;
		}
	}

	// 表单样式
	.login-form {
		margin-bottom: 24px;

		.form-group {
			margin-bottom: 20px;

			label {
				display: block;
				font-size: 14px;
				font-weight: 500;
				color: $text;
				margin-bottom: 8px;
			}

			.input-with-icon {
				position: relative;
				border: 1px solid #E5E7EB;
				border-radius: 8px;
				transition: all 0.2s ease;
				width: 100%;
				/* 确保输入框宽度不超过父容器 */
				box-sizing: border-box;
				/* 添加这一行确保边框和内边距计入宽度 */

				&:hover {
					border-color: $primary;
				}

				&.focused {
					border-color: $primary;
					box-shadow: 0 0 0 2px rgba($primary, 0.2);
				}

				i {
					position: absolute;
					left: 12px;
					top: 50%;
					transform: translateY(-50%);
					color: $text-light;
				}

				input {
					width: 100%;
					height: 45px;
					padding: 0 40px 0 40px;
					font-size: 15px;
					border: none;
					border-radius: 8px;
					outline: none;
					box-sizing: border-box;
					/* 确保padding不会导致输入框溢出 */

					&::placeholder {
						color: #A1A1AA;
					}
				}

				.toggle-password {
					position: absolute;
					right: 12px;
					top: 50%;
					transform: translateY(-50%);
					background: none;
					border: none;
					cursor: pointer;
					color: $text-light;
					padding: 0;

					&:hover {
						color: $text;
					}
				}
			}
		}

		.form-options {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;

			.remember-me {
				display: flex;
				align-items: center;
				gap: 8px;

				input[type="checkbox"] {
					width: 16px;
					height: 16px;
					accent-color: $primary;
				}

				label {
					font-size: 14px;
					color: $text;
				}
			}

			.forgot-password {
				font-size: 14px;
				color: $primary;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.login-button {
			width: 100%;
			height: 48px;
			background: $primary;
			color: $white;
			font-size: 16px;
			font-weight: 500;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: background 0.2s ease;
			display: flex;
			justify-content: center;
			align-items: center;

			&:hover {
				background: $primary-dark;
			}

			&:disabled {
				background: #CBD5E1;
				cursor: not-allowed;
			}

			.loading-spinner {
				width: 20px;
				height: 20px;
				border: 2px solid rgba(255, 255, 255, 0.3);
				border-top: 2px solid $white;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}
		}
	}

	// 页脚
	.login-footer {
		text-align: center;

		p {
			font-size: 14px;
			color: $text-light;
			margin: 0;

			a {
				color: $primary;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	// 错误弹窗样式
	.error-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;

		.error-content {
			background: $white;
			border-radius: 12px;
			padding: 24px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

			.error-header {
				display: flex;
				align-items: center;
				margin-bottom: 16px;

				svg {
					color: $secondary;
					margin-right: 12px;
				}

				h3 {
					margin: 0;
					color: $text;
					font-size: 18px;
				}
			}

			p {
				color: $text;
				margin: 0 0 20px 0;
				line-height: 1.5;
			}

			button {
				background: $primary;
				color: $white;
				border: none;
				border-radius: 6px;
				padding: 10px 20px;
				font-size: 14px;
				font-weight: 500;
				cursor: pointer;
				transition: background 0.2s;
				width: 100%;

				&:hover {
					background: $primary-dark;
				}
			}
		}
	}
</style>